<template>
  <div>
    <div class="list-detail">
      <div class="btn">
        <Space>
          <Button type="primary" :icon="icon_str" @click="isShow">{{ btn_str }}</Button>
          <Button type="info" icon="md-arrow-dropup" @click="editData">{{
            isEdit ? '取消编辑' : '编辑'
          }}</Button>
          <Button type="dashed" icon="ios-refresh" @click="Refresh" v-if="!isEdit">刷新</Button>
          <Button type="success" icon="ios-send" v-if="isEdit" @click="sub">提交</Button>
          <Button type="info" icon="ios-flower" @click="toExamine">审核</Button>
          <Button type="dashed" icon="md-apps" @click="seeHostory">操作记录</Button>
        </Space>
      </div>
      <div class="list-main">
        <div class="left">
          <Row style="display: flex; flex-flow: nowrap; overflow-x: scroll; transform: scaleY(-1)">
            <Col :span="left">
              <LeftDrawer ref="leftRef" @closeDrawer="closeDrawer"></LeftDrawer
            ></Col>
            <Col :span="middle" style="transform: scaleY(-1)">
              <DetailInfo v-if="!isEdit" :form="form" ref="detailInfoRef"></DetailInfo>
              <EditInfo
                v-if="isEdit"
                :form="form"
                :listID="route.query.listID"
                @changeDiagItems="changeDiagItems"
                @selectOption="selectOption"
                @changeQcInfo="changeQcInfo"
                ref="editInfoRef"
              />
            </Col>
            <Col :span="right" style="transform: scaleY(-1)">
              <PlugIn ref="plugInRef" @selectPlugOption="selectPlugOption"></PlugIn>
            </Col>
          </Row>
        </div>
      </div>
    </div>

    <HostoryDetail ref="historyRef"></HostoryDetail>
    <ExamineOption ref="examineModal" @initList="initList"></ExamineOption>
  </div>
</template>
<script setup>
import { onMounted, onActivated } from 'vue'
import http from '@/util/http1'
let { proxy } = getCurrentInstance()
import { useRoute, useRouter } from 'vue-router'

import LeftDrawer from './Left.vue'
import HostoryDetail from './components/hostoryDetail.vue'
import DetailInfo from './components/detailInfo.vue'
import EditInfo from './components/editInfo.vue'
import ExamineOption from './components/examineOption.vue'
import PlugIn from './components/plugIn.vue'

let show = ref(false)
let left = ref(0)
let middle = ref(18)
let right = ref(6)
let icon_str = ref('ios-search')
let btn_str = ref('查看')
const isEdit = ref(false)
const editData = () => {
  isEdit.value = !isEdit.value
}

import { useCommonStore } from '@/stores/common.js'

const commonStore = useCommonStore()

console.log(commonStore.policy, 'commonStore')

const leftRef = ref(null)

const isShow = () => {
  if (!show.value) {
    leftRef.value.openLeft(route.query)
    show.value = true
    left.value = 12
    middle.value = 12
    right.value = 6
    icon_str.value = 'md-close'
    btn_str.value = '关闭'
  } else {
    leftRef.value.showLeft = false
    show.value = false
    left.value = 0
    middle.value = 18
    right.value = 6
    icon_str.value = 'md-search'
    btn_str.value = '查看'
  }
}

const closeDrawer = () => {
  show.value = false
  left.value = 0
  middle.value = 24
  icon_str.value = 'md-search'
  btn_str.value = '查看'
}

const plugInRef = ref(null)

const historyRef = ref(null)

// 查看历史记录
const seeHostory = () => {
  historyRef.value.openHostory(route.query.listID)
}

let form = reactive({
  head: {
    qdlsh: '',
    hospitalName: '',
    hospitalCode: '',
    level: '',
    insureCode: '',
    number: '',
    declareTime: '',
  },
  basicInfo: { realName: '', sex: 0 },
  diagInfo: {
    way: '',
    icU_Json: [],
    blood_Json: [],
    diagItems: [],
  },
  specialDiagInfos: [],
  chargeInfo: {},
  extra: {},
  personInfo: {},
})

const detailInfoRef = ref()
const editInfoRef = ref(null)

const route = useRoute()
const router = useRouter()

console.log(route, 444)

const Refresh = () => {
  oldDetailByBAH(route.query.listID)
}

const oldDetailByBAH = (listID) => {
  http.get('/Settlement/List/Detail?listID=' + listID, {}).then((response) => {
    console.log(response, 'response')
    form.head = response?.data?.head
    form.basicInfo = response?.data?.basicInfo
    form.chargeInfo = response?.data?.chargeInfo
    form.diagInfo = response?.data?.diagInfo
    form.specialDiagInfos = response?.data?.specialDiagInfos
    form.personInfo = response?.data?.personInfo

    form.diagInfo.icU_Json = response?.data?.diagInfo?.icU_Json
      ? JSON.parse(response?.data?.diagInfo?.icU_Json)
      : []
    form.diagInfo.blood_Json = response?.data?.diagInfo?.blood_Json
      ? JSON.parse(response?.data?.diagInfo?.blood_Json)
      : []
    plugInRef.value.getRecommendInfo(form.basicInfo.certNo)
  })
}

let examineModal = ref(null)
// 审核
const toExamine = () => {
  examineModal.value.show({ listID: route.query.listID })
}

const initList = () => {
  router.push({ path: '/Settlement/newList/PageList' })
}

const sub = () => {
  editInfoRef.value.sub()
}
const changeDiagItems = (value) => {
  plugInRef.value.changeDiagItems(value)
}

const selectOption = (value) => {
  plugInRef.value.getOption(value)
}

const selectPlugOption = (value) => {
  editInfoRef.value.getPlugValue(value)
}

const changeQcInfo = (value) => {
  plugInRef.value.getPlugQCInfo(value)
}

onActivated(() => {
  isEdit.value = false
  oldDetailByBAH(route.query.listID)
})
</script>
<style lang="less" scoped>
.list-detail {
  width: 100%;
  height: 100%;
  background-color: #fff;

  .btn {
    width: 100%;
    text-align: right;
    margin-bottom: 10px;
  }

  .flex {
    display: flex;
  }

  .space-between {
    justify-content: space-between;
  }

  .list-main {
    height: 100%;

    .left {
      display: flex;
      // /deep/ .ivu-row {
      //   display: flex;
      //   flex-flow: nowrap;
      //   overflow-y: scroll;
      // }

      .main-table {
        width: 100%;
        height: 100%;
        border: 2px solid #000;
        padding: 10px 6px;
        background-color: #f5f7f9;
        // display: flex;
        // justify-content: space-between;

        .title1 {
          height: 70px;
          color: #000;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #edf1fc;
          margin: 15px 0;
          font-size: 20px;
        }
      }
    }
  }
}
</style>
